<template>
  <div class="Talent_pool">
    <div class="main">
      <!-- 企业预定信息 -->
      <div class="job_LocationSelection">
        <div class="booking_position">修改预定信息</div>
        <div class="form" style="width:70%;margin:0 auto;">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
            <el-row>
              <el-col :span="5">
                <el-form-item label="预约位置">
                  <el-input v-model="ruleForm.place" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="企业名称">
                  <el-input v-model="ruleForm.name" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="对外展示名称" prop="shortName">
                  <el-input v-model="ruleForm.shortName" placeholder="对外展示名称"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="联系人" prop="contact">
                  <!-- <el-input v-model="ruleForm.contact" placeholder="联系人"></el-input> -->
                  <el-input v-model="ruleForm.contact" v-if="!ruleForm.companyContact" placeholder="联系人"></el-input>
                  <el-input v-model="companybyuser.contact" v-else :disabled="ruleForm.companyContact"></el-input>
                  <!-- <el-input v-model="companybyuser.contactPhone" v-else :disabled="ruleForm.companyContact"></el-input> -->
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <div class="enterprise">
                  <el-checkbox v-model="ruleForm.companyContact">企业联系人</el-checkbox>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="联系方式" prop="phone">
                  <!-- <el-input v-model="ruleForm.phone" placeholder="联系方式"></el-input> -->
                  <el-input v-model="ruleForm.phone" v-if="!ruleForm.companyContact" placeholder="联系方式"></el-input>
                  <el-input v-model="companybyuser.contactPhone" v-else :disabled="ruleForm.companyContact"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="联系人邮箱" prop="mail">
                  <el-input v-model="ruleForm.mail" v-if="!ruleForm.companyContact" placeholder="联系人邮箱："></el-input>
                  <el-input v-model="companybyuser.contactMail" v-else :disabled="ruleForm.companyContact"></el-input>
                  <!-- <el-input v-model="companybyuser.contactMail" v-else :disabled="ruleForm.companyContact"></el-input> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="18">
                <el-form-item label="公司福利">
                  <p class="job_welfare">
                    <span class="welfare">增加公司标签，提升公司诱人指数 (最多可选择 8 个) </span> <span class="esitTag"
                      @click="esitTag"><img src="../../../assets/img/add_tag.png" alt=""> 修改标签</span>
                  </p>
                  <div class="tag-group">
                    <el-tag v-for="(item,index) in allure" :key="index" effect="plain">
                      {{ item.data || item.name || item.val}}
                    </el-tag>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="18">
                <el-form-item v-for="(domain, index) in domains" :label="'职位' + Number(index+1)" :key="index">
                  <el-input v-model="domain.name" disabled="disabled" style="width:58%;"></el-input>
                  <el-button style="margin-left:30px;" size="mini" type="danger" plain
                    @click.prevent="removeDomain(domain)">删除</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20">
                <el-form-item>
                  <el-button @click="addDomain" style="width:224px;display:flex;justify-content:center;">
                    <span class="esitTag"><img src="../../../assets/img/add_tag.png" alt=""> 添加职位</span>
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button style="width:148px; height:46px; margin-top:30px;" :loading="isloading" type="primary"
                size="medium" @click="submitForm('ruleForm')">确定</el-button>
              <el-button style="margin-left:50px;width:148px; height:46px;" type="primary" plain size="medium"
                @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 设置公司标签组件 -->
      <set-CompanyLabel :esitTagBoolean="esitTagBoolean" @close="close" @confirmHaveTag="confirmHaveTag"
        :allure="allure" ref="CompanyLabel">
      </set-companyLabel>
      <!-- 选择职位组件 -->
      <job-selection ref="childClick" :jobSelectionBoolean="jobSelectionBoolean" :domains="domains" @close="close"
        @handleSelection="handleSelection">
      </job-selection>
    </div>
  </div>
</template>

<script>
import { getfindById, updataCompany, selectcompanybyuserid } from '../../../api/jobfair';
// 自定义正则表达式
import { validPhone, checkEmail } from '../../../utils/common'
export default {
  name: 'modifyInformation',
  components: {
  },
  data () {
    return {
      // 禁止多次点击
      isloading: false,
      // 福利标签
      tagArrs: [],
      ruleForm: {},
      ruleFormArr: {
        // 招聘会ID
        jobFairId: '',
        // 企业ID
        companyId: '1',
        // 企业名称
        name: '',
        // 企业对外名称
        shortName: '',
        // 预定位置
        place: '',
        // 公司福利标签
        allure: '',
        // 是否为企业联系人
        companyContact: false,
        // 联系人
        contact: '',
        // 联系方式
        phone: '',
        // 联系邮箱
        mail: '',
        // 操作人id
        // opeId: '',
        // 职位信息
        idsInVo: []
      },
      // 下方表单
      rules: {
        shortName: [
          { required: true, message: '请输入对外展示名称', trigger: 'blur' }
        ],
        contact: [
          { required: true, message: '请输入联系人名称', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }, //这里需要用到全局变量
          { message: '请输入正确的手机号', validator: validPhone, trigger: 'blur' }
        ],
        mail: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      },
      // 添加职位

      domains: [],

      // 添加公司标签 显示隐藏
      esitTagBoolean: false,
      // 添加职位弹框显示隐藏
      jobSelectionBoolean: false,
      // 企业联系人
      enterprise: false,
      // 福利标签
      allure: [],
      // 已进入页面请求的企业，名称
      companybyuser: {}
    }
  },
  methods: {
    //删除域名
    removeDomain (item) {
      var index = this.domains.indexOf(item)
      if (index !== -1) {
        this.domains.splice(index, 1)
        console.log(this.domains)
      }
    },
    //   添加职位
    addDomain () {
      // this.jobList = this.domains
      this.jobSelectionBoolean = true
      // 调用字组建的方法
      this.$refs.childClick.getPage()
    },
    // 提交
    submitForm (formName) {
      let that = this
      that.isloading = true
      if (!that.companybyuser.name) {
        that.$message.error('企业名称获取失败');
        that.isloading = true
        return false
      }
      that.$refs[formName].validate((valid) => {
        if (valid) {
          // 1、 企业标签 变为字符串 传递
          let allures = []
          if (that.allure) {
            that.allure.map(v => {
              allures.push(Number(v.val))
            })
          }
          that.ruleFormArr.allure = JSON.stringify(allures) // .join(',')
          // 2、职位信息
          let retainBooth = []
          if (!that.domains || Object.keys(that.domains).length <= 0 || that.domains.length <= 0) {
            that.$message.error('至少选择一个职位才可以预定');
            that.isloading = false
            return false
          }
          if (Object.keys(that.domains).length > 0 || that.domains.length > 0) {
            Object.keys(that.domains).map((item) => {
              retainBooth.push({ id: that.domains[item].id })
            })
          }


          // 是否为企业联系人
          that.ruleFormArr.idsInVo = retainBooth

          // 企业名称
          that.ruleFormArr.name = that.ruleForm.name
          // 是否企业联系人
          that.ruleFormArr.companyContact = that.ruleForm.companyContact
          // 联系人
          that.ruleFormArr.contact = that.ruleForm.contact
          // 邮箱
          that.ruleFormArr.mail = that.ruleForm.mail
          // 招聘会id
          that.ruleFormArr.jobFairId = that.ruleForm.jobFairId
          // phone
          that.ruleFormArr.phone = that.ruleForm.phone

          that.ruleFormArr.shortName = that.ruleForm.shortName
          // 企业id
          that.ruleFormArr.companyId = that.ruleForm.companyId
          // 数据id
          that.ruleFormArr.id = that.ruleForm.id
          // 选择展位号码
          that.ruleFormArr.place = that.ruleForm.place
          updataCompany(that.ruleFormArr).then((res) => {
            if (res.success) {
              that.$message({
                message: '提交成功',
                type: 'success'
              });

              that.$router.push({
                path: '/jobFair'
              })
              that.isloading = false
              that.resetForm('ruleForm')
            } else {
              that.isloading = false
              that.$message.error(res.msg)
            }
          })
        } else {
          console.log('error submit!!');
          that.isloading = false
          return false;
        }
      });
    },
    // 取消 并且重置
    resetForm (formName) {
      this.$router.push({
        path: '/jobFair'
      })
      this.$refs[formName].resetFields();
    },
    // 添加标签
    esitTag () {
      this.esitTagBoolean = true
      this.$refs.CompanyLabel.getListTag()
    },
    // 关闭弹框
    close (val) {
      this.esitTagBoolean = val
      this.jobSelectionBoolean = val
    },
    confirmHaveTag (valTag) {
      console.log(valTag)
      this.close(false)
      this.allure = valTag
    },
    handleSelection (selectArr) {
      console.log(selectArr)
      this.domains = this.domains.concat(selectArr)
    },
    // 请求修改的数据
    getfindById () {
      getfindById(this.$route.query.id).then((res) => {
        if (res.success) {
          let datats = res.data
          // 
          let allureArr = []
          datats.allList.map((item) => {
            for (let key in item) {
              item[key].val = key
              allureArr.push(item[key])
            }
          })
          this.allure = allureArr
          this.domains = datats.jobList || []
          this.ruleForm = datats
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 已进入页面获取企业相关信息 （接口请求）
    selectcompanybyuserid () {
      let obj = {
        userId: ''
      }
      selectcompanybyuserid(obj).then(data => {
        // 对请求出来的数据进行逻辑处理
        console.log(data, 'jobfairforword 招聘会预定');
        if (data.success) {
          this.companybyuser = data.data
        } else {
          this.$message('数据返回错误')
        }
      })
    },
  },
  created () {
    this.getfindById()
    // 已进入页面获取企业相关信息 （接口请求）
    this.selectcompanybyuserid()
  },
  watch: {
    "ruleForm.companyContact": {
      handler (newValue, oldValue) {
        console.log(newValue, "监听是否选择位企业联系人做一些操作");
        let that = this
        if (newValue) {
          that.ruleFormArr.contact = that.companybyuser.name
          that.ruleFormArr.mail = that.companybyuser.contactMail
          that.ruleFormArr.phone = that.companybyuser.contactPhone

          that.ruleForm.phone = that.companybyuser.contactPhone
          that.ruleForm.mail = that.companybyuser.contactMail
          that.ruleForm.contact = that.companybyuser.name
          console.log(that.ruleFormArr)
        } else {
          that.ruleFormArr.contact = ''
          that.ruleFormArr.mail = ''
          that.ruleFormArr.phone = ''
          that.ruleForm.phone = ''
          that.ruleForm.mail = ''
          that.ruleForm.contact = ''
        }
      }
    }
  }
}
</script>

<style scoped>
.Talent_pool {
    margin-top: 30px;
    width: 100%;
}
.Talent_pool .main {
    background: rgba(246, 246, 248, 1);
    width: 1200px;
    margin: 0 auto;
}
.job_LocationSelection {
    width: 100%;
    /* height: 359px; */
    background: #ffffff;
}
.booking_position {
    height: 67px;
    line-height: 67px;
    text-align: left;
    text-indent: 45px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    border-bottom: 1px solid rgba(232, 232, 232, 1);
    position: relative;
}

/* 修改预定 */
.demo-ruleForm {
    margin-top: 38px;
}
.job_welfare {
    display: flex;
    align-items: center;
}
.welfare {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(34, 34, 34, 1);
    margin-right: 16px;
    opacity: 1;
}
.esitTag {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #0093ff;
}
.esitTag img {
    width: 13px;
    height: 13px;
    margin-right: 3px;
}
.tag-group .el-tag {
    margin-right: 20px;
}

.enterprise {
    margin-left: 54px;
    margin-top: 11px;
}
</style>